<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>1_非受控组件</title>
</head>

<body>
<div id="test"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
  class Login extends React.Component{

    //非受控组件： 表单组件没有value prop就可以称为非受控组件

    handleSubmit =(event)=>{
      event.preventDefault()//阻止表单提交
      const {username,password} = this
      alert(username.value+password.value)
    }
    render(){
      return(
              <form action="http://www.baidu.com" onSubmit={this.handleSubmit}>
               用户名： <input type="text" ref={(c)=>this.username=c} name="username"/>
               密码: <input type="password" ref={(c)=>this.password=c} name="password"/>
                <button >登录</button>
              </form>
      )
    }
  }


  ReactDOM.render(<Login/>, document.getElementById('test'))

</script>
</body>

</html>
